<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="员工姓名">
          <el-input
            v-model="formInline.name"
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="员工手机号">
          <el-input
            v-model="formInline.phone_number"
            placeholder="请输入员工手机号"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="时间">
          <el-date-picker v-model="formInline.value" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          align="center"
          type="index"
          :index="indexMethod"
          label="序号"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="员工姓名"
          width="180"
        >
        </el-table-column>
        <!-- <el-table-column prop="mobile" align="center" label="员工手机号">
        </el-table-column> -->
        <el-table-column prop="avatar" align="center" label="员工头像">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="imgHeader + scope.row.avatar"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="count" align="center" label="评价次数">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleClick(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[50, 100, 200, 300]"
        :page-size="50"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="反馈内容"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="parameter" label-width="80px">
        <el-form-item>
          <el-input
            type="textarea"
            :rows="2"
            v-model="parameter.common"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">返 回</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { opinions } from "../../../../utils/api";
import { getPingJia } from "../../../../utils/main";
export default {
  data() {
    return {
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      formInline: {
        phone_number: "",
        name: "",
      },
      imgHeader: this.Global.imgHeader,
      tableData: [],
      parameter: {
        common: "",
      },
      total: 0,
      limit: 50,
      page: 1,
      currentPage: "1",
      name: "",
      phone_number: "",
      authority_id: "3,4",
      value: "",
    };
  },
  methods: {
    //查询
    onSubmit() {
      this.name = this.formInline.name;
      this.phone_number = this.formInline.phone_number;
      this.page = 1;
      this.getList();
    },
    onReset() {
      this.name = "";
      this.formInline.name = "";
      this.getList();
    },
    //详情
    // handleEdit(row) {
    //   this.parameter.common = row.common;
    //   this.dialogVisible = true;
    // },
    // 详情
    handleClick(row) {
      console.log("id", row.id);
      this.$router.push(`/pingjia/xiangqing?id=${row.id}`);
    },
    //序号
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //关闭
    handleClose(done) {
      done();
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    //列表数据
    // opinionsS() {
    //   this.loading = true;
    //   opinions(
    //     this.token,
    //     this.page,
    //     this.limit,
    //     this.value,
    //     this.formInline.mobile,
    //     this.formInline.name
    //   )
    //     .then((res) => {
    //       if (res.data.status) {
    //         this.tableData = res.data.data.data;
    //         this.total = res.data.data.count;
    //         this.tableData.forEach((item) => {
    //           if (item.avatar) {
    //             item.image = item.avatar;
    //             item.img = "https://bjsf.bjsky.top" + item.avatar;
    //           }
    //           if (item.ctime) {
    //             item.ctime_text = this.getNowTime(item.ctime * 1000);
    //           }
    //         });
    //         let timer = setTimeout(() => {
    //           this.loading = false;
    //           clearTimeout(timer);
    //         }, 400);
    //       } else {
    //         if (res.data.msg == "token失效,请重新进行登录") {
    //           this.$router.push("/login");
    //         }
    //         if (res.data.msg == "此账号没有权限") {
    //           this.$message.error(res.data.msg);
    //           this.loading = false;
    //         }
    //         let timer = setTimeout(() => {
    //           this.$message.error(res.data.msg);
    //         }, 5000);
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err.message);
    //     });
    // },
    // 获取评价列表
    async getList() {
      this.loading = true;
      let res = await getPingJia(
        this.token,
        this.page,
        this.limit,
        this.name,
        this.authority_id,
        this.phone_number
      );
      if (res.data.status) {
        this.tableData = res.data.msg.data || [];
        this.total = res.data.msg.count;
        // console.log(this.tableData, "55555");
        let timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
    getNowTime(e) {
      let date = new Date(e);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      return year + "-" + month + "-" + day + " " + hour + ":" + minute;
    },
  },
  mounted() {
    // this.opinionsS();
    this.getList();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.divFlex {
  display: flex;
  align-items: center;
}
</style>